<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>{{msg}}</h1>
        <button @click="msg='像秋天的桂花一样'">修改 msg</button>
    </div>
    <hr>

    <div id='bpp'>
        <h1>{{msg}}</h1>
        <button @click="msg='像秋天的桂花一样'">修改 msg</button>
    </div>
</body>
<script>

    /*
        data 为什么要是一个函数，而且要 return 一个新的对象
        是因为每个页面或者每个组件都应该拥有自己独立的数据和作用域
        防止页面组件之间的数据相互污染。
    */

    const obj = {
        msg: '你笑起来真好看'
    }

    const app = {
        // 是用来声明响应式数据的选项
        data() {
            // return {
            //     msg: '你笑起来真好看'
            // }
            return obj
        },
        // 是用来声明函数的选项
        methods: {},
    }
    Vue.createApp(app).mount('#app')



    const bpp = {
        // 是用来声明响应式数据的选项
        data() {
            // return {
            //     msg: '你笑起来真好看'
            // }

            return obj
        },
        // 是用来声明函数的选项
        methods: {},
    }
    Vue.createApp(bpp).mount('#bpp')
</script>

</html>